<template>
	<view>
		<DaDatetimePicker
		    :visible="showDatePicker"
		    :value="datePickerValue"
		    @confirm="handleConfirm"
		    @cancel="handleCancel">
		</DaDatetimePicker>
			
		<!-- 添加账单记录 -->
		<uni-popup ref="pop" type="bottom" background-color="#fff" @change="onChange">
			<view class="p-24r">
				<!-- tab 支出，收入 -->
				<view v-if="isUpdate">
					<text class="mr-10 px-8 py-3 rounded-4 text-14" :style="{backgroundColor:type?'rgba(238, 238, 238,.4)':'rgba(255, 215, 0,.2)',color:type?'#999':'gold'}" @click="type=0">支出</text>
					<text class="px-8 py-3 rounded-4 text-14" :style="{backgroundColor:type?'rgba(255, 215, 0,.2)':'rgba(238, 238, 238,.4)',color:type?'gold':'#999'}" @click="type=1">收入</text>
				</view>
				<!-- 金额 -->
				<view class="flex justify-start py-12r items-center" style="border-bottom: 1px solid #eee;">
					<text class="iconfont icon-rmb text-48r p-16r" style="background-color: gold;color: white;border-radius: 30px;"></text>
					<text class="flex-auto uni-input p-24r text-64r" :style="{color:money=='0.00'?'#999':'#333'}" >{{money}}</text>
					<!-- <input class="flex-auto uni-input p-24r text-64r" type="digit" placeholder="0.00" v-model="num"/> -->
					<text class="iconfont p-16r" :class="activeTypeName" style="color: #333;font-size: 30px;font-weight: bold;"></text>
					
				</view>
				<!-- 类型 -->
				<view v-if="isUpdate" class="flex flex-wrap my-10 py-3" style="overflow: scroll;row-gap: 6px;" :style="{height:typeList.length>6?'104px':'52px'}">
					<view v-for="item in typeList" class="flex flex-column items-center basis-1/6" @click="chooseType(item)">
						<text class="iconfont rounded-50p p-8 mb-4" :style="{backgroundColor:item.id==activeType?'gold':'rgba(238, 238, 238,.4)'}" :class="item.icon"></text>
						<text class="text-12 text-999">{{item.title}}</text>
					</view>
				</view>
				<!-- 时间，备注，图片 -->
					<view class="flex items-center pt-12">
						<view class="flex flex-column items-center justify-center mr-8" @click="handlePickerShow()">
							<text class="iconfont icon-riliriqi2 mb-4" style="font-size: 48rpx;"></text>
							<view class="picker-text">{{ showDate }}</view>
						</view>
						<view class="flex-auto flex items-center">
							<!-- <text class="iconfont icon-icon text-60r mr-10" style="color: gold;font-size: 48rpx;"></text> -->
							<input class="uni-input" type="text" placeholder="输入备注内容" v-model="remark" />
						</view>
						<view class="ml-8">
							<text v-if="base64Str==''" class="iconfont icon-tupian rounded-20p text-30 p-16r" style="background-color: rgba(238, 238, 238,.4); color: #ccc;border: 1px dashed #eee;" @click="chooseImg"></text>
							<view v-else class="relative">
								<image :src="base64Str" class="w-46p h-46p bg rounded-20p" mode="aspectFill" @click="chooseImg" />
								<text class="iconfont icon-close absolute -right-4 -top-4" @click="delImage"></text>
							</view>
						</view>
					</view>
					
				<!-- 操作按钮 -->
				<!-- <view class="flex pb-24">
					<button class="w-100p" @click="handleSave" size="mini" type="primary">保存</button>
				</view> -->
			</view>
			<!-- 数字键盘 -->
			<view class="flex">
				<view class="basis-3/4 flex flex-wrap">
					<text class="basis-1/3 py-12 bg-white text-center text-24 font-600" :class="{'basis-2/3':item==10}" @click="addNum(item)" style="border: 4px solid #eee;color: #333; box-sizing: border-box;" v-for="item in 11" :key="item">
						{{item==10?'0':item==11?'.':item}}
					</text>
				</view>
				<view class="basis-1/4 h-full flex flex-column">
					<text class="basis-1/4 iconfont icon-delete2 flex items-center justify-center font-600 bg-white text-center py-12" style="color: #333;border: 4px solid #eee;box-sizing: border-box; font-size: 24px;" @click="moneyArr.splice(-1,1)"></text>
					<text class="basis-1/4 bg-white text-center py-12 font-600" style="color: #333;border: 4px solid #eee;box-sizing: border-box; font-size: 24px;" @click="moneyArr.splice(0)">C</text>
					<text class="basis-1/2 bg text-center py-12 font-600 flex items-center justify-center" style="color: white;border: 4px solid #eee;box-sizing: border-box; font-size: 24px;" @click="handleSave">确定</text>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import DaDatetimePicker from '@/components/da-datetime-picker/index.vue';
	import {addRecord,updateRecord} from '@/api/api.js';
	import { useTypeStore } from '@/store/type';
	import imageTools from '@/uni_modules/niceui-image-tools/util/image-tools.js'
	export default {
		name:"setAccount",
		components:{DaDatetimePicker},
		props:{
			// 是否显示popup
			visible:{
				type:Boolean,
				default:false
			},
			// 类型对象，type,icon
			typeObj:{
			  type: Object,
			  default: () => {},
			},
			// 修改or添加
			isUpdate:{
				type:Boolean,
				default:false
			},
			// 账单记录对象
			record:{
				type:Object,
				default: () => {},
			}
		},
		// 父组件visible置false
		emits:['close','updateConfirm'],
		computed:{
			showDate() {
				return this.datePickerValue.slice(5,10)
			},
			money() {
				const str = this.moneyArr.join('')
				if(str) {
					return str
				}
				return '0.00'
			},
			typeList() {
				return this.type ? this.typeStore.inType : this.typeStore.payType
			}
		},
		data() {
			return {
				activeType:'',
				activeTypeName:'',
				showDatePicker :false,
				datePickerValue :'',
				moneyArr:[],
				remark:'',
				type:0,
				isShow:false,
				base64Str:''
			};
		},
		watch:{
			visible(val) {
				if(val) {
					this.$refs.pop.open()
				} else {
					this.$refs.pop.close()
				}
			}
		},
		setup() {
			const typeStore = useTypeStore()
			return {typeStore}
		},
		methods:{
			// popup弹出初始化内容
			onChange(e) {
				if(e.show) {
					if(this.isUpdate) {
						this.updateInit()
					}else {
						this.addInit()
					}
				}else {
					this.$emit('close')
				}
			},
			// 初始化添加内容
			addInit() {
				this.moneyArr.splice(0);
				this.remark = '';
				this.activeType = this.typeObj.id;
				this.activeTypeName = this.typeObj.icon;
				this.datePickerValue = this.now();
				this.base64Str = ''
			},
			// 初始化编辑内容
			updateInit() {
				this.moneyArr = this.record.num.toString().split('');
				this.remark = this.record.remark;
				this.activeType = this.record.type_id;
				this.activeTypeName = this.record.icon;
				this.datePickerValue = this.record.create_time;
				this.type = this.record.type;
				this.base64Str = this.record.image;
			},
			// 当前时间
			now() {
				const date = new Date()
				const year = date.getFullYear()
				const mon = (date.getMonth()+1).toString().padStart(2,'0');
				const day = date.getDate().toString().padStart(2,'0');
				const H = date.getHours().toString().padStart(2,'0');
				const M = date.getMinutes().toString().padStart(2,'0');
				const S = date.getSeconds().toString().padStart(2,'0');
				return `${year}-${mon}-${day} ${H}:${M}:${S}`
			},
			// 保存
			async handleSave() {
				if(this.moneyArr.length==0) {
					uni.showToast({
						title:'请输入金额',
						icon:'error'
					})
					return
				}
				const obj = {
					num:parseFloat(this.money),
					type_id:this.activeType,
					remark:this.remark,
					image:this.base64Str,
					create_time:this.datePickerValue,
				}
				// console.log(obj)
				if(this.isUpdate) {
					// console.log(obj)
					obj.id = parseInt(this.record.id),
					await updateRecord(obj)
					await this.$emit('updateConfirm')
				} else {
					await addRecord(obj)
				}
				this.$refs.pop.close()
			},
			// 展开时间选择器
			handlePickerShow() {
			  this.showDatePicker = true
			  // console.log('handlePickerShow ==>')
			},
			// 选择时间
			handleConfirm(v) {
			  this.datePickerValue = v
			  this.showDatePicker = false
			  // console.log('handleConfirm ==>', v)
			},
			// 取消选择时间
			handleCancel() {
			  this.showDatePicker = false
			  // console.log('handleCancel ==>')
			},
			// 数字键盘
			addNum(val) {
				// 10 0
				if(val==10) {
					this.moneyArr.push(0)
				}else if(val==11) {
					if(this.moneyArr.indexOf('.')==-1){
						if(this.moneyArr.length==0) {
							this.moneyArr.push('0')
						}
						this.moneyArr.push('.')
					}
				} else {
					this.moneyArr.push(val)
				}
			},
			// chooseType
			chooseType(obj) {
				this.activeType = obj.id
				this.activeTypeName = obj.icon
			},
			// chooseImg
			chooseImg() {
				const self = this;
				uni.chooseImage({
					count: 1, //默认9
					// sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					// sourceType: ['album'], //从相册选择
					success: async function (res) {
						const filePath = res.tempFilePaths[0];
						imageTools.pathToBase64(filePath).then(base64 => {
								self.base64Str = base64
							})
							.catch(error => {
								console.error(error)
							})
					}
				});
			},
			delImage() {
				this.base64Str = ''
				
			}
		}
	}
</script>

<style lang="scss">

</style>